<template>
	<view class="page login">
		<cu-custom :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">授权登录</block>
		</cu-custom>
		<view class="login-content">
			<view class="login-banner">楼宇智控小程序</view>
			<image class="login-logo" src="../../static/logo.jpg" mode=""></image>
			<button class="login-weapp login-button" @click="handleLogin">微信授权登录</button>
			<button class="login-mobile login-button">手机号验证登录</button>
		</view>
		<view class="login-footer">
			<QnCheckbox v-model="checked" />
			<view class="login-footer-text">
				我已阅读并同意
				<text>《用户协议》</text>
				、
				<text>《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import QnCheckbox from '@/components/checkbox.vue';
	export default {
		components: {
			QnCheckbox
		},
		data() {
			return {
				checked: false
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		onShow() {},
		methods: {
			handleLogin() {
				if (!this.checked) {
					uni.showToast({
						title: '未勾选用户协议',
						duration: 2000
					});
					return;
				}
				let that = this;
				uni.getUserProfile({
					desc: '用于完善用户信息',
					success(user) {
						console.log('user', user);
						userInfo(user);
					}
				});

				function userInfo(user) {
					uni.login({
						provider: 'weixin',
						scopes: 'auth_user',
						success: data => {
							console.log('获得参数', data);
							userLogin(user, data.code);
						}
					});
				}

				function userLogin(user, code) {
					console.log('this', that.$store);

					that.$store
						.dispatch('login', code)
						.then(() => {
							console.log('执行到此处的了不');
							that.$route({
								type: 'reLaunch',
								url: '/pages/my/my'
							});
						})
						.catch(() => {});
					// login(code)
					// 	.then(data => {
					// 		console.log('data', data);
					// 	})
					// 	.catch(error => {
					// 		console.log('登录执行报错', error);
					// 	});
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
		height: 100vh;
	}

	.login-banner {
		text-align: center;
		font-size: 40rpx;
		color: #919191;
		font-weight: 200;
	}

	.login-logo {
		margin: 40rpx auto;
		width: 150rpx;
		height: 140rpx;

	}

	.login-content {
		margin: 32rpx;
		background-color: #fefefe;
		padding: 80rpx 0;
		border-radius: 10rpx; //圆角
		text-align: center;
	}

	.login-button {
		border: 0;
		overflow: hidden;
		background-color: red;
		height: 80rpx;
		border-radius: 40rpx; //圆角
		color: #ffffff;
		font-size: 28rpx;
		font-weight: 300;
		line-height: 80rpx;
		margin: 0 80rpx;
		margin-bottom: 28rpx;
	}

	.login-weapp {
		background-color: #4bab40;
	}

	.login-mobile {
		background-color: #3875c6;
	}

	.login-footer {
		padding: 40rpx;
		display: flex;
		align-items: center; //垂直居中
		justify-content: center; //水平居中

		.login-footer-text {
			padding-left: 20rpx;
			font-size: 26rpx;

			text {
				color: #3875c6;
			}
		}
	}
</style>
